<template>
  <div class="becomingsoon">
    <div class="becomingsoon-ago-date">
      <p>06月17日</p>
    </div>
    <div class="list-item">
      <router-link to="/details/10002">
        <div class="becomingsoon-ago">
          <div class="becomingsoon-ago-details">
            <div class="becomingsoon-ago-details-left">
              <img src="http://8.142.22.78:3000/images/second7.jpg" alt="" />
            </div>
            <div class="becomingsoon-ago-details-right">
              <h3 class="p_1">战双帕米什</h3>
              <p class="p_2"><span>更新</span></p>
              <p class="p_3">更新</p>
              <p class="p_4">《战双帕弥什》是一款末世科幻题材的3D动作手游。</p>
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <div class="list-item">
      <router-link to="/details/10003">
        <div class="becomingsoon-ago">
          <div class="becomingsoon-ago-details">
            <div class="becomingsoon-ago-details-left">
              <img src="http://8.142.22.78:3000/images/third6.jpg" alt="" />
            </div>
            <div class="becomingsoon-ago-details-right">
              <h3 class="p_1">香肠派对</h3>
              <p class="p_2"><span>更新</span></p>
              <p class="p_3">更新</p>
              <p class="p_4">全新联动赛季开启，光之巨人正在前往香肠岛！</p>
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul class="list-bottom">
        <div class="becomingsoon-today-date">
          <van-divider
            :hairline="false"
            :style="{
              color: '#333333',
              borderColor: '#e1e1e1',
            }"
            content-position="left"
            class="becomingsoon-today-date-text"
            >今天</van-divider
          >
        </div>
        <!-- //渲染页面数据 -->
        <li class="list-bottom-item" v-for="item in state.list" :key="item.id">
          <router-link :to="'/details/' + item.id">
            <div class="becomingsoon-today">
              <div class="becomingsoon-today-datails">
                <div class="becomingsoon-today-datails-top">
                  <p class="p-1">测试</p>
                  <p class="p-2">10:00</p>
                </div>
                <div class="becomingsoon-today-datails-center">
                  <img :src="item.Imgurl" alt="" />
                </div>
                <div class="becomingsoon-today-datails-bottom">
                  <div class="becomingsoon-today-datails-bottom-text">
                    <div class="becomingsoon-today-datails-bottom-left">
                      <h3>{{ item.title }}</h3>
                    </div>
                    <div class="becomingsoon-today-datails-bottom-right">
                      试玩
                    </div>
                  </div>
                  <div class="becomingsoon-today-datails-bottom-text-bottm">
                    {{ item.synopsis }}
                  </div>
                </div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
//引入插件
import { reactive } from "vue";
import { getmoreApi } from "@/utils/api.js";

export default {
  setup() {
    //保存数据
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
    });
    //设置页面下拉加载
    let pageSize = 2;
    let currentPage = 1;
    const onLoad = async () => {
      const res = await getmoreApi({
        pageSize,
        currentPage,
      });
      state.list.push(...res.result);
      currentPage++;

      state.loading = false;

      if (state.list.length >= res.count) {
        state.finished = true;
      }
    };
    //导出数据
    return {
      state,
      onLoad,
    };
  },
};
</script>

<style scoped>
.becomingsoon {
  position: fixed;
  left: 0;
  right: 0;
  top: 60px;
  z-index: -1;
  bottom: 57px;
  overflow-y: scroll;
  background: white;
  /* padding: 0 16px; */
}
.becomingsoon-list {
  width: 343px;
}
.list-item {
  margin-bottom: 20px;
}
.list-bottom-item {
  margin-bottom: 20px;
}
.becomingsoon-ago-date {
  width: 100%;
  line-height: 37px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  border-bottom: 1px solid #e1e1e1;
}
.becomingsoon-ago-date p {
  margin-left: 16px;
}

.becomingsoon-ago-details {
  width: 343px;
  margin: 0 16px;
}

.becomingsoon-list-bottom {
  width: 343px;
}
.becomingsoon-today-date {
  padding: 0 16px;
}
.becomingsoon-today-date-text {
  line-height: 37px;
  font-size: 18px;
  font-weight: 500;
}
.becomingsoon-today-datails {
  width: 343px;
  margin-left: 16px;
}
.becomingsoon-today-datails-top {
  height: 26px;
  display: flex;
}
.p-1 {
  width: 70px;
  font-size: 16px;
  font-weight: 900;
  color: #32b9ba;
  line-height: 26px;
  text-indent: 8px;
  background: linear-gradient(-135deg, transparent 20px, rgb(228, 243, 243) 0)
    top right;
}
.p-2 {
  font-size: 16px;
  color: #999;
  line-height: 26px;
}
.becomingsoon-today-datails-center {
  height: 192px;
  margin-bottom: 5px;
}
.becomingsoon-today-datails-center img {
  width: 100%;
  height: 100%;
}
.becomingsoon-ago-details {
  width: 339px;

  display: flex;
}
.becomingsoon-ago-details-left {
  width: 148px;
  height: 84px;
  border-radius: 10px;
}
.becomingsoon-ago-details-left img {
  width: 100%;
  height: 100%;
}
.becomingsoon-ago-details-right {
  flex: 1;

  margin-left: 10px;
}
.p_1 {
  font-size: 18px;
  color: #333;
}
.p_2 span {
  height: 20px;
  font-size: 12px;
  color: #999;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  margin-bottom: 5px;
}
.p_3 {
  font-size: 12px;
  color: #32b9ba;
  margin-top: 5px;
  margin-bottom: 5px;
}
.p_4 {
  font-size: 12px;
  color: #999;
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.becomingsoon-today-datails-bottom {
  height: 55px;
}
.becomingsoon-today-datails-bottom-text {
  width: 343px;
  display: flex;
  justify-content: space-between;
  margin: 3px 0;
}
.becomingsoon-today-datails-bottom-left {
  font-size: 18px;
  height: 30px;
  color: #333;
  flex: 1;
}
.becomingsoon-today-datails-bottom-right {
  font-size: 18px;
  color: #32b9ba;
  background: rgb(228, 243, 243);
  border-radius: 15px;
  width: 75px;
  text-align: center;
  line-height: 30px;
}
.becomingsoon-today-datails-bottom-text-bottm {
  font-size: 12px;
  color: #999;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
